<template>
  <view class="home">

    <view class="image">
      <image src="../../static/imgs/Rectangle 548.png" mode=""></image>
      <u-icon class="icon" name="arrow-left" color="#fff" size="38" @click="gobrack()"></u-icon>
    </view>

    <!--  -->
    <view class="content">
      <view class="price1">
        <view class="price2">
          ￥
          <text>629</text>
        </view>
        <view class="price3" v-if="flag">活动火热进行中</view>
        <view class="price3 price4" v-else>活动已结束</view>
      </view>
      <view class="title">长清大学生红叶谷汉服真人秀开团</view>
      <view class="item">报名时间：2023月6日24-2023年7月24日</view>
      <view class="item">截止时间：2023-7-31</view>
      <view class="item">可报名人数：60人</view>
      <view class="item" style="border-bottom: 1px solid #f1f1f1;">剩余名额：10人</view>
      <view class="jhdd">
        <image src="../../static/imgs/Slice 106@2x.png" mode=""></image>
        <text>集合地点：长清大学城</text>
      </view>
      <view class="jhdd">
        <image src="../../static/imgs/Slice 107@2x.png" mode=""></image>
        <text>项目内容：提供汉服一套、写真一组</text>
      </view>
      <view class="jhdd">
        <image src="../../static/imgs/Slice 108@2x.png" mode=""></image>
        <text>活动时间：2023月8日1-2023年8月5日</text>
      </view>
      <view class="notification">
        <view class="">活动须知：</view>
        <view class="">1.限购3人</view>
        <view class="">2.购买后距离活动时间开始前24小时内不可退款</view>
      </view>
    </view>

    <!--  -->
    <view class="details">
      <view class="title">活动详情
        <view class="line"></view>
      </view>
      <image src="../../static/imgs/Rectangle 548.png" mode=""></image>
      <button v-if="flag" @click="godetails()">立即报名</button>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        flag: true // true 进行中 false 结束
      }
    },
    methods: {
      gobrack() {
        uni.navigateBack({
          delta: 1
        })
      },
      godetails() {
        uni.navigateTo({
          url: '/pages/order_details/order_details'
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .home {
    background: #F5F5F5;
  }

  // 
  .image {
    position: relative;
    width: 750rpx;
    height: 750rpx;

    >image {
      width: 100%;
      height: 100%;
    }

    .icon {
      z-index: 99;
      position: absolute;
      top: 118rpx;
      left: 32rpx;
    }
  }

  // 
  .content {
    margin-bottom: 20rpx;
    padding: 37rpx 32rpx;
    position: absolute;
    top: 486rpx;
    width: 750rpx;
    // height: 768rpx;
    background: #FFFFFF;
    border-radius: 40rpx 40rpx 40rpx 40rpx;

    .price1 {
      display: flex;
      align-items: center;
      margin-bottom: 10rpx;

      .price2 {
        font-size: 32rpx;
        font-weight: bold;
        color: #EF5353;

        >text {
          font-size: 64rpx;
        }

      }

      .price3 {
        margin-top: 7rpx;
        margin-left: 20rpx;
        width: 226rpx;
        height: 40rpx;
        line-height: 40rpx;
        text-align: center;
        background: #FFE7E7;
        border-radius: 4rpx 4rpx 4rpx 4rpx;

        font-size: 24rpx;
        font-weight: 500;
        color: #FF3434;
      }

      .price4 {
        background: #FDFCF1;
        color: #EBBC13;
      }

    }

    .title {
      margin-bottom: 27rpx;
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
    }

    .item {
      padding-bottom: 20rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #333333;
    }

    .jhdd {
      margin-top: 25rpx;

      >image {
        vertical-align: middle;
        width: 27rpx;
        height: 27rpx;
      }

      >text {
        margin-left: 16rpx;
        font-size: 28rpx;
        font-weight: 500;
        color: #333333;
      }
    }

    .notification {
      margin-top: 20rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #999999;

      >view {
        margin-top: 7rpx;
      }
    }
  }

  // 活动详情
  .details {
    position: relative;
    margin-top: 20rpx;
    padding: 48rpx 32rpx;
    top: 530rpx;
    width: 750rpx;
    height: 1060rpx;
    background: #FFFFFF;
    border-radius: 40rpx 40rpx 40rpx 40rpx;

    .title {
      position: relative;
      font-size: 32rpx;
      font-weight: 800;
      color: #333333;
      z-index: 2;

      .line {
        position: absolute;
        bottom: 0;
        width: 126rpx;
        height: 8rpx;
        background: linear-gradient(104deg, #FF9F9F 0%, #FF8787 100%);
        border-radius: 76rpx 76rpx 76rpx 76rpx;
      }
    }

    >image {
      margin-top: 20rpx;
      width: 684rpx;
      height: 802rpx;
    }

    >button {
      margin-top: 38rpx;
      width: 686rpx;
      height: 72rpx;
      line-height: 72rpx;
      text-align: center;
      background: linear-gradient(90deg, #FF7575 0%, #FF4B4B 100%);
      border-radius: 82rpx 82rpx 82rpx 82rpx;


      font-size: 32rpx;
      font-weight: 800;
      color: #FFFFFF;
    }
  }
</style>